<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="d" uri="/WEB-INF/resource.tld"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>

<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>

<title>订单详情</title>
  
  <meta name="description" content="">
  <meta name="keyword" content="关键字1，关键字2，—">

</head>
<!-- end header -->
<body>
  <div class="page-group">
    <div class="page page-current moyu-page" style="background-color: #F8F8F8;">
      <header class="bar bar-nav shop-header">
        <h1 class="title">订单详情</h1>
      </header>
      
      <div class="content" style="background-color: #F8F8F8;">
        <div class="card">
          <div class="card-header">
          <img src="${ctx.resource}/image/logo.png" alt="" />
          </div>
          <div class="card-content">
            <div class="list-block media-list">
              <ul>
                <li class="item-content">
                  <div class="item-media">
                    <img src="${ctx.resource}/image/moyu/moyu-1.jpeg" width="44">
                  </div>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">人马君 乐在美味即食魔芋拌面（肽+） 轻卡低热量 减脂餐 魔芋面主食品方便即食速食</div>
                    </div>
                    <div class="item-subtitle">
                      <c:choose>
                        <c:when test="${order.type == 1}">
                          香辣钵钵鸡味6盒
                        </c:when>
                        <c:when test="${order.type == 2}">
                          葱油鸡汁味6盒
                        </c:when>
                        <c:when test="${param.type == 3}">
                          香辣钵钵鸡味3盒+葱油鸡汁味3盒
                        </c:when>
                        <c:otherwise>
                        
                        </c:otherwise>
                      </c:choose>
                    </div>
                    <div class="item-subtitle clearfix">
                      <p class="pull-left single-price">
                        <span>￥</span>118
                      </p>
                      <p class="pull-right amount">
                        <span>x</span>${order.amount}
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="card-footer">
            <div></div>
            <div>
              <span class="total-amount">共${order.amount}件</span> <span>商品小计：<span class="price-symbol">￥<span class="price">
                <fmt:formatNumber value="${order.price/100}" pattern="00.00"></fmt:formatNumber>
              </span></span></span>
            </div>
          </div>
        </div>
        
    <div class="card">
      <div class="card-header">订单信息</div>
      <div class="card-content">
        <div class="card-content-inner clearfix"  style="padding: 0 0.75rem 0.75rem 0.75rem;">
          <div class="card-content-inner clearfix"  style="padding: 0 0.75rem 0.75rem 0.75rem;">
            <div class="pull-left clearfix" style="width: 100%;">
              <p style="margin: 0px;" class="clearfix">
                <label class="pull-left" style="width: 70px; text-align: right;">支付方式：</label>
                <span class="pull-left user-info" style="width: 70%;  max-width: 230px; text-align: left;">
                  微信支付
                </span>
              </p>
              <p style="margin: 0px;"  class="clearfix">
              <label class="pull-left" style="width: 70px; text-align: right;">支付时间：</label>
              <span class="pull-left address-detail" style="width: 70%; max-width: 230px; text-align: left;">
                <fmt:formatDate value="${order.payTime}" pattern="yyyy-MM-dd HH:mm:SS" />
              </span></p>
              <p style="margin: 0px;"  class="clearfix">
              <label class="pull-left" style="width: 70px; text-align: right;">快递方式：</label>
              <span class="pull-left address-detail" style="width: 70%; max-width: 230px; text-align: left;">
                包邮
              </span></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">收货信息</div>
      <div class="card-content">
        <div class="card-content-inner clearfix"  style="padding: 0 0.75rem 0.75rem 0.75rem;">
          <div class="card-content-inner clearfix"  style="padding: 0 0.75rem 0.75rem 0.75rem;">
            <div class="pull-left clearfix" style="width: 100%;">
              <p style="margin: 0px;" class="clearfix">
                <label class="pull-left" style="width: 70px; text-align: right;">收货人：</label>
                <span class="pull-left user-info" style="width: 70%;  max-width: 230px; text-align: left;">
                  ${order.name}（${order.mobile}）
                </span>
              </p>
              <p style="margin-top: 0px;"  class="clearfix">
              <label class="pull-left" style="width: 70px; text-align: right;">收货地址：</label>
              <span class="pull-left address-detail" style="width: 70%; max-width: 230px; text-align: left;">
                ${order.pcd}（${order.address}）
              </span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <c:choose>
      <c:when test="${empty order.wuliuCode}">
        <div class="card">
          <div class="card-header">物流信息</div>
          <div class="card-content">
            <div class="card-content-inner clearfix"  style="padding: 0 0.75rem 0.75rem 0.75rem;">
              <p style="text-align: center;">订单物流信息暂未更新，请耐心等待~</p>
            </div>
          </div>
        </div>
      </c:when>
      <c:otherwise>
        <div class="card">
          <div class="card-header">物流信息</div>
          <div class="card-content">
            <div class="card-content-inner clearfix"  style="padding: 0 0.75rem 0.75rem 0.75rem;">
              <div class="pull-left clearfix" style="width: 100%;">
                <p style="margin: 0px;" class="clearfix">
                  <label class="pull-left" style="width: 80px; text-align: right;">快递单号：</label>
                  <span class="pull-left user-info" style="width: 70%;  max-width: 230px; text-align: left;">
                    ${order.wuliuCode}
                  </span>
                </p>
                <p style="margin-top: 0px;"  class="clearfix">
                <label class="pull-left" style="width: 80px; text-align: right;">快递状态：</label>
                <span class="pull-left address-detail" style="width: 70%; max-width: 230px; text-align: left;">
                  <a href="${ctx.host}/moyu/orders/${order.id}/wuliu">点击查看</a>
                </span></p>
              </div>
            </div>
          </div>
        </div>
      </c:otherwise>
    </c:choose>
    
    <%-- <div class="content-block">
    <p><a href="${ctx.host}/moyu-orders" class="button button-big button-success button-fill">查看所有订单</a></p>
    </div> --%>

      </div>
      <!-- End Content -->
      
    </div>
  </div>
  

  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/product/moyu-order.js" />
  <script type="text/javascript">
      var jsConfig = JSON.parse('${wechatJsConfig}')
      require(['page/product/moyu-order'], function(page) {
        page.init({
          jsConfig: jsConfig
        })
      })
    </script>

</body>
</html>